<template>
	<view class="receipt-page">
		<view class="info-block">
			<view class="tab-block">
				<view class="name-item">
					<view class="name">{{info.name}}</view>
					<view class="name">{{info.time}}</view>
				</view>
				<view class="number">{{info.number}}</view>
				<view class="time-item">
					<view class="time-name">交租时间</view>
					<view class="time">{{info.starTime}}至{{info.endTime}}</view>
				</view>
				<view class="receipt-info">
					<view class="receipt-item">
						<view class="receipt-name">应交租金</view>
						<view class="time">{{info.rentPayable}}</view>
					</view>
					<view class="receipt-item">
						<view class="receipt-name">使用面积</view>
						<view class="time">{{info.area}}/M²</view>
					</view>
				</view>
				<view class="receipt-info">
					<view class="receipt-item">
						<view class="receipt-name">政府补贴</view>
						<view class="time">{{info.rentPayable}}</view>
					</view>
					<view class="receipt-item">
						<view class="receipt-name">租金标准</view>
						<view class="time">{{info.rentPayable}}/M²</view>
					</view>
				</view>
				<view class="receipt-info">
					<view class="receipt-item">
						<view class="receipt-name">实交租金</view>
						<view class="time">{{info.rentPayable}}</view>
					</view>
					<view class="receipt-item">
						<view class="receipt-name">政府补贴</view>
						<view class="time">{{info.rentPayable}}/M²</view>
					</view>
				</view>
				<view class="receipt-info">
					<view class="receipt-item">
						<view class="receipt-name">滞纳金</view>
						<view class="time">{{info.rentPayable}}</view>
					</view>
					<view class="receipt-item">
						<view class="receipt-name">实收标准</view>
						<view class="time">{{info.area}}/M²</view>
					</view>
				</view>
				<view class="name-item">
					<view class="item">{{info.letters}}</view>
					<view class="item">{{info.actualRrent}}元</view>
				</view>
				<view class="number">{{info.address}}</view>
			</view>
		</view>
		<view class="btn normal" @click="navigate('/page_pack/my_pages/pay_record/success')">开具收据</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {
					name: '王建国（11190）',
					time: '2025年02月24日',
					number: '2025022401364',
					starTime: '2023-07-01',
					endTime: '2024-06-01',
					rentPayable: '0.0',
					area: '58.2',
					actualRrent: '3283.2',
					standard: '5.00',
					letters: '参仟贰佰捌拾叁元贰角',
					address: '裕和园4楼号（0院）2单元5层3号'
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.receipt-page {
		padding: 30rpx;

		.info-block {
			border-radius: 30rpx;
			padding: 30rpx;
			background: #fff;
			margin-bottom: 30rpx;

			.tab-block {
				border: 1px solid #eeeeee;
				font-size: 30rpx;

				.name-item {
					display: flex;
					align-items: center;
					line-height: 70rpx;

					.name:last-child {
						border-right: none;
					}

					.name {
						width: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						border-right: 1px solid #eeeeee;
						border-bottom: 1px solid #eeeeee;
						font-weight: bold;
					}

					.item:last-child {
						border-right: none;
					}

					.item {
						width: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						border-right: 1px solid #eeeeee;
						border-bottom: 1px solid #eeeeee;
						border-top: 1px solid #eeeeee;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.number {
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					line-height: 70rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}

				.time-item {
					width: 100%;
					display: flex;
					align-items: center;
					line-height: 70rpx;
					border-top: 1px solid #eeeeee;

					.time-name {
						width: calc(100% / 4);
						border-right: 1px solid #eeeeee;
						font-weight: bold;
						display: flex;
						align-items: center;
						justify-content: center;
					}

					.time {
						width: calc((100% / 4)*3);
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}

				.receipt-info {
					width: 100%;
					display: flex;
					align-items: center;
					line-height: 70rpx;
					border-top: 1px solid #eeeeee;

					.receipt-item:nth-child(2n) {
						border-right: none;
					}

					.receipt-item {
						display: flex;
						align-items: center;
						width: 50%;
						border-right: 1px solid #eeeeee;

						.receipt-name {
							width: 50%;
							border-right: 1px solid #eeeeee;
							font-weight: bold;
							display: flex;
							align-items: center;
							justify-content: center;
						}

						.time {
							width: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
						}
					}
				}
			}
		}

		.btn {
			border-radius: 20rpx;
			margin-top: 30rpx;
		}
	}
</style>